@import 'styles/settings';

$size: 100px;

.spinner {
  margin: auto;
  box-sizing: border-box;
  background-clip: padding-box;
  width: $size;
  height: $size;
  border-radius: 100px;
  border: 4px solid rgba(255, 255, 255, 0.1);
  -webkit-mask: linear-gradient(rgba(0, 0, 0, 0.1), $black 90%); // don't remove -webkit prefix - as of today mask is supported on chrome and safari only with the -webkit prefix
  transform-origin: 50% 60%;
  transform: perspective(200px) rotateX(66deg);
  animation: spinner-wiggle 1.2s infinite;
}
.spinner:before,
.spinner:after {
  content: "";
  position: absolute;
  margin: -4px;
  box-sizing: inherit;
  width: inherit;
  height: inherit;
  border-radius: inherit;
  opacity: .05;
  border: inherit;
  border-color: transparent;
  animation: spinner-spin 1.2s cubic-bezier(0.6, 0.2, 0, 0.8) infinite, spinner-fade 1.2s linear infinite;
}

.spinner:before {
  border-top-color: $java;
}

.spinner:after {
  border-top-color: $white;
  animation-delay: 0.3s;
}

@keyframes spinner-spin {
  100% { transform: rotate(360deg); }
}
@keyframes spinner-fade {
  20% { opacity: .1; }
  40% { opacity: 1; }
  60% { opacity: .1; }
}

.spinnerAbsolute {
  position: absolute;
  top: 42%;
  left: 42%;

  @media #{$tablet-portrait} {
    top: 42%;
    left: 47%;
  }
}

.spinnerWithOverlay {
  background-color: $firefly;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
}

.initialLoading {
  left: 50%;
  margin-right: -50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%) perspective(200px) rotateX(66deg);;
}